<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="寻找感兴趣的商品" @search="search" v-model="key" auto-focus="focus" :fixed="focus" :clearabled="true"
			 focus :show-action="false" ></u-search>
		</view>
		<view class="history">
			<!-- v-show="keys.length > 0" -->
			<view class="history-c">
				<view class="history-title">
					<view class='ht-left'>历史记录</view>
					<view class='ht-right' @click="deleteKey">
						<image src="../../../static/index/sc.png" mode=""></image>
					</view>
				</view>
				<view class="history-body">
					<view class="hb-item" v-for="(item, key) in keys" :key="key" @click="toNav(item)">
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="history-c">
				<view class="history-title">
					<view class='ht-left'>热门搜索</view>
				</view>
				<view class="history-body">
					<view class="hb-item" v-for="(items, keys) in hot" :key="keys" @click="toHot(items)">
						{{items}}
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keys: [],
				hot: ['奶粉', '尿不湿', '奶瓶', '奶粉', '婴儿推车'],
				key: '',
				navType: 'toNav',
				focus: true,
			}
		},
		computed: {
			recommend() {
				// return this.$store.state.config.recommend_keys
				return []
			}
		},
		methods: {
			//搜索
			search: function() {
				let keys = this.key;
				if (keys != '') {
					// let search_key = this.$db.get('search_key');
					let search_key = uni.getStorageSync('search_key');
					if (!search_key) {
						search_key = [];
					}
					let flag = true;
					for (var key in search_key) {
						if (search_key[key] == keys) {
							flag = false;
						}
					}
					if (flag) {
						search_key.unshift(keys);
					}
					uni.setStorageSync('search_key', search_key)
					uni.setStorageSync('search_term', keys)
		
					uni.navigateTo({
						url: '/pages/search/search?searchKey=' + keys
					})
					// this.$common.navigateTo('/pages/classify/index?key=' + keys);
				}
			},

			//清除
			deleteKey: function() {
				//删除显示
				this.keys = [];
				//删除存储
				uni.removeStorageSync('search_key')
				// this.$db.del('search_key');
			},

			//跳转操作
			toNav: function(keys) {
				// this.$db.set('search_term', keys);
				uni.setStorageSync('search_term', keys)
				let search_key = uni.getStorageSync('search_key');
				// let search_key = this.$db.get('search_key');
				if (!search_key) {
					search_key = [];
				}
				var flag = true;
				for (var key in search_key) {
					if (search_key[key] == keys) {
						flag = false;
					}
				}
				if (flag) {
					search_key.unshift(keys);
				}
				// this.$db.set('search_key', search_key);
				uni.setStorageSync('search_key', search_key)
				uni.navigateTo({
					url: '/pages/search/search?searchKey=' + keys
				})
				// this.$common.navigateTo('/pages/classify/index?key=' + keys);
			},
		},
		//加载触发
		onShow(e) {
			// this.keys = this.$db.get('search_key');
			//       this.key = this.$db.get('search_term');
			this.keys = uni.getStorageSync('search_key');
			this.key = uni.getStorageSync('search_term');
			this.focus = true;
		},
		//页面卸载触发
		onUnload() {
			// this.$db.set('search_term', '');
			uni.setStorageSync('search_term', '');
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100%;

		.search {
			background-color: #ffffff;
			padding: 20rpx 30rpx 0 30rpx;
		}
		.history{
			padding: 0 30rpx;
			
			.history-c {
				padding-top: 63rpx;
				height: auto;
			
				.history-title {
					overflow: hidden;
			
					.ht-left {
						float: left;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: bold;
						color: rgba(41, 41, 41, 1);
					}
			
					.ht-right {
						float: right;
			
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			
				.history-body {
					overflow: hidden;
					margin-top: 32rpx;
			
					.hb-item {
						display: inline-block;
						float: left;
						background: rgba(245, 247, 248, 1);
						border-radius: 30rpx;
						margin-right: 16rpx;
						margin-bottom: 20rpx;
						padding: 13rpx 29rpx;
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 400;
						color: rgba(41, 41, 41, 1);
					}
				}
			}
		}
		
	}
</style>
